<template>
  <div class="main-wrapper">

    <!--布局-->
    <el-container>
      <!--左导航-->
      <el-aside width="200px">
        <!--Logo部分-->
        <div class="aside-logo-wrapper">
          <!--@标识src下-->
          <img src="../../assets/logo.png" alt="">
          <span>Crm管理后台系统</span>
        </div>
        <!--导航菜单-->
        <el-scrollbar>
          <el-menu
              active-text-color="#F56C6C"
              text-color="#606266"
              :default-active="this.$router.path" router>
            <!--导航头-->
            <el-menu-item index="1">
              <i class="el-icon-menu"></i>
              <span slot="title">系统首页</span>
            </el-menu-item>

            <!--商品相关-->
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>商品相关</span>
              </template>
              <el-menu-item index="/product">
                <i class="el-icon-menu"></i>
                <span slot="title">产品查询</span>
              </el-menu-item>
              <el-menu-item index="/goods">
                <i class="el-icon-menu"></i>
                <span slot="title">商品管理</span>
              </el-menu-item>
              <el-menu-item index="/price">
                <i class="el-icon-menu"></i>
                <span slot="title">价格调整管理</span>
              </el-menu-item>
              <el-menu-item index="/priceAudit">
                <i class="el-icon-menu"></i>
                <span slot="title">价格调整审核</span>
              </el-menu-item>

              <el-menu-item index="/brand">
                <i class="el-icon-menu"></i>
                <span slot="title">品牌管理</span>
              </el-menu-item>
              <el-menu-item index="/type">
                <i class="el-icon-menu"></i>
                <span slot="title">分类管理</span>
              </el-menu-item>

              <el-menu-item index="/colour">
                <i class="el-icon-menu"></i>
                <span slot="title">颜色管理</span>
              </el-menu-item>
              </el-submenu>


            <!--销售相关-->
            <el-submenu index="6">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>B2C销售管理</span>
              </template>
              <el-menu-item index="/order/order">
                <i class="el-icon-menu"></i>
                <span slot="title">B2C销售订单管理</span>
              </el-menu-item>
              <el-menu-item index="/order/Goods">
                <i class="el-icon-menu"></i>
                <span slot="title">B2C销售统计</span>
              </el-menu-item>
              <el-menu-item index="/order/online">
                <i class="el-icon-menu"></i>
                <span slot="title">B2C网店订单管理</span>
              </el-menu-item>
              <el-menu-item index="/order/orderOutStock">
                <i class="el-icon-menu"></i>
                <span slot="title">B2C销售出库管理</span>
              </el-menu-item>
              <el-menu-item index="/order/returnGood">
                <i class="el-icon-menu"></i>
                <span slot="title">B2C销售退货管理</span>
              </el-menu-item>
            </el-submenu>

            <el-submenu index="7">

              <template slot="title">
                <i class="el-icon-location"></i>
                <span>库存管理</span>
              </template>

              <el-submenu index="8">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>出库管理</span>
                </template>
                <el-menu-item index="/salesOutbound">
                  <i class="el-icon-menu"></i>
                  <span slot="title">B2C销售出库管理</span>
                </el-menu-item>
              </el-submenu>

              <el-submenu index="9">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>入库管理</span>
                </template>
                <el-menu-item index="/putStorage">
                  <i class="el-icon-menu"></i>
                  <span slot="title">商品入库管理</span>
                </el-menu-item>
              </el-submenu>
            </el-submenu>
          </el-menu>
        </el-scrollbar>

      </el-aside>
      <!--右导航-->
      <el-container>
        <!--右导航头-->
        <el-header></el-header>
        <!--右主题内容-->
        <el-main>

          <!--动态渲染-->
          <div class="main-box">
            <router-view/>
          </div>

        </el-main>
      </el-container>
    </el-container>

  </div>
</template>



<script>
export default {
  name: "index"
}
</script>

<style scoped lang="scss">
.main-wrapper {
  height: 100%;
}

.el-header {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #fff;
  color: #333;


  .aside-logo-wrapper {
    text-align: center;
    background-color: #B3C0D1;
    height: 60px;
    line-height: 60px;

    img {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      vertical-align: middle;
      margin-right: 8px;
    }

    span {
      font-weight: 700;
      color: #fff;
      font-family: "华文行楷";
    }


  }


}

.el-scrollbar {
  height: calc(100% - 60px);
}

.el-main {
  background-color: #E9EEF3;
  color: #606266;
  padding: 6px 0 0 6px;

  .main-box {
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 15px 0px 0px 15px;
    box-sizing: border-box;
  }


}

.el-container {
  height: 100%;
}


</style>
